<html lang="zh-CN">
<head></head>
<body class="font-sans bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">{% load static static %}



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息通知 - 湘西旅游攻略</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 - 湘西特色色调 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B4513', // 主色调：棕褐色，代表湘西的吊脚楼和土地
                        secondary: '#D2691E', // 辅助色：赭石色，代表湘西的山峦
                        accent: '#228B22', // 强调色：深绿色，代表湘西的自然景观
                        folk: '#CD5C5C', // 民俗色：暗红色，代表湘西的民俗文化
                        neutral: {
                            100: '#F9F5F1', // 浅米色背景
                            200: '#E8E0D5',
                            300: '#D4C6B5',
                            400: '#A69886',
                            500: '#7D7060',
                            600: '#5C5346',
                            700: '#3A352F',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'notification': '0 2px 10px rgba(139, 69, 19, 0.08)',
                        'notification-hover': '0 4px 16px rgba(139, 69, 19, 0.12)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .notification-transition {
                transition: all 0.3s ease;
            }
            .badge-pulse {
                animation: pulse 2s infinite;
            }
            .scroll-indicator {
                height: 3px;
                background-color: theme('colors.secondary');
                width: 0%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 9999;
                transition: width 0.2s ease;
            }
            @keyframes pulse {
                0% { transform: scale(1); opacity: 1; }
                50% { transform: scale(1.05); opacity: 0.8; }
                100% { transform: scale(1); opacity: 1; }
            }
            .btn-effect {
                transition: all 0.2s ease;
            }
            .btn-effect:active {
                transform: translateY(2px);
            }
            .notification-detail {
                display: none;
                margin-top: 1rem;
                padding-top: 1rem;
                border-top: 1px dashed #e5e7eb;
            }
            .notification-detail.active {
                display: block;
            }
            .setting-panel {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-out;
            }
            .setting-panel.active {
                max-height: 500px;
                transition: max-height 0.5s ease-in;
            }
            .toggle-switch {
                position: relative;
                display: inline-block;
                width: 40px;
                height: 20px;
            }
            .toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
            .toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: .3s;
                border-radius: 34px;
            }
            .toggle-slider:before {
                position: absolute;
                content: "";
                height: 16px;
                width: 16px;
                left: 2px;
                bottom: 2px;
                background-color: white;
                transition: .3s;
                border-radius: 50%;
            }
            input:checked + .toggle-slider {
                background-color: theme('colors.primary');
            }
            input:checked + .toggle-slider:before {
                transform: translateX(20px);
            }
        }
    </style>


    <!-- 滚动进度指示器 -->
    <div class="scroll-indicator" id="scrollIndicator"></div>

    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-10">
        <!-- 返回主页链接 -->
        <div class="mb-4">
            <a href="#" class="inline-flex items-center text-primary hover:text-secondary active:text-accent transition-colors btn-effect">
                <i class="fa fa-arrow-left mr-1"></i>
                <a href="/search/">返回主页</a>
            </a>
        </div>

        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">消息通知</h1>
            <p class="text-neutral-400 mt-2">查看您的最新湘西旅游相关通知和消息</p>
        </div>

        <!-- 通知控制栏 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-center space-x-2">
                <span class="text-neutral-500">全部通知</span>
                <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full badge-pulse">6 条未读</span>
            </div>
            <div class="flex items-center space-x-3">
                <button class="text-sm text-neutral-500 hover:text-primary transition-colors flex items-center space-x-1 btn-effect" id="markAllAsRead">
                    <i class="fa fa-check-circle-o"></i>
                    <span>全部标为已读</span>
                </button>
                <button class="text-sm text-neutral-500 hover:text-red-500 transition-colors flex items-center space-x-1 btn-effect" id="clearRead">
                    <i class="fa fa-trash-o"></i>
                    <span>清空已读</span>
                </button>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <!-- 左侧分类导航 - 始终显示所有分类 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-lg shadow-sm p-4 sticky top-24">
                    <h3 class="text-lg font-semibold text-neutral-700 mb-4">通知分类</h3>
                    <ul class="space-y-1">
                        <li>
                            <a href="#" class="notification-category flex items-center justify-between px-3 py-2.5 rounded-md bg-primary/10 text-primary font-medium transition-colors btn-effect" data-category="all">
                                <span class="flex items-center space-x-3">
                                    <i class="fa fa-bell-o w-5 text-center"></i>
                                    <span>全部通知</span>
                                </span>
                                <span class="bg-primary text-white text-xs px-2 py-0.5 rounded-full">6</span>
                            </a>
                        </li>
                        <li data-category-item="comment">
                            <a href="#" class="notification-category flex items-center justify-between px-3 py-2.5 rounded-md text-neutral-600 hover:bg-neutral-100 transition-colors btn-effect" data-category="comment">
                                <span class="flex items-center space-x-3">
                                    <i class="fa fa-comment-o w-5 text-center"></i>
                                    <span>评论回复</span>
                                </span>
                                <span class="bg-primary text-white text-xs px-2 py-0.5 rounded-full">3</span>
                            </a>
                        </li>
                        <li data-category-item="follow">
                            <a href="#" class="notification-category flex items-center justify-between px-3 py-2.5 rounded-md text-neutral-600 hover:bg-neutral-100 transition-colors btn-effect" data-category="follow">
                                <span class="flex items-center space-x-3">
                                    <i class="fa fa-user-plus w-5 text-center"></i>
                                    <span>关注通知</span>
                                </span>
                                <span class="bg-primary text-white text-xs px-2 py-0.5 rounded-full">1</span>
                            </a>
                        </li>
                        <li data-category-item="plan">
                            <a href="#" class="notification-category flex items-center justify-between px-3 py-2.5 rounded-md text-neutral-600 hover:bg-neutral-100 transition-colors btn-effect" data-category="plan">
                                <span class="flex items-center space-x-3">
                                    <i class="fa fa-calendar-check-o w-5 text-center"></i>
                                    <span>行程提醒</span>
                                </span>
                                <span class="bg-primary text-white text-xs px-2 py-0.5 rounded-full">1</span>
                            </a>
                        </li>
                        <li data-category-item="notice">
                            <a href="#" class="notification-category flex items-center justify-between px-3 py-2.5 rounded-md text-neutral-600 hover:bg-neutral-100 transition-colors btn-effect" data-category="notice">
                                <span class="flex items-center space-x-3">
                                    <i class="fa fa-bullhorn w-5 text-center"></i>
                                    <span>景区通知</span>
                                </span>
                                <span class="bg-primary text-white text-xs px-2 py-0.5 rounded-full">1</span>
                            </a>
                        </li>
                    </ul>

                    <!-- 完善的通知设置区域 -->
                    <div class="mt-6 pt-6 border-t border-neutral-200">
                        <h3 class="text-lg font-semibold text-neutral-700 mb-4">通知设置</h3>

                        <!-- 通知偏好设置 -->
                        <div class="mb-3">
                            <button class="w-full text-left px-3 py-2.5 rounded-md text-neutral-600 hover:bg-neutral-100 transition-colors flex items-center justify-between btn-effect setting-toggle" data-target="preferences-panel">
                                <span class="flex items-center space-x-3">
                                    <i class="fa fa-cog w-5 text-center"></i>
                                    <span>通知偏好设置</span>
                                </span>
                                <i class="fa fa-chevron-down text-xs text-neutral-400 transition-transform duration-300"></i>
                            </button>
                            <div class="setting-panel px-3 py-2" id="preferences-panel">
                                <div class="space-y-3 py-2">
                                    <!-- 评论回复通知设置 -->
                                    <div class="flex items-center justify-between py-1">
                                        <div class="flex items-center space-x-2">
                                            <i class="fa fa-comment-o text-neutral-500"></i>
                                            <span class="text-sm">评论回复通知</span>
                                        </div>
                                        <label class="toggle-switch" data-category="comment">
                                            <input type="checkbox" checked="" class="notification-toggle">
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>

                                    <!-- 关注通知设置 -->
                                    <div class="flex items-center justify-between py-1">
                                        <div class="flex items-center space-x-2">
                                            <i class="fa fa-user-plus text-neutral-500"></i>
                                            <span class="text-sm">关注通知</span>
                                        </div>
                                        <label class="toggle-switch" data-category="follow">
                                            <input type="checkbox" checked="" class="notification-toggle">
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>

                                    <!-- 行程提醒设置 -->
                                    <div class="flex items-center justify-between py-1">
                                        <div class="flex items-center space-x-2">
                                            <i class="fa fa-calendar-check-o text-neutral-500"></i>
                                            <span class="text-sm">行程提醒</span>
                                        </div>
                                        <label class="toggle-switch" data-category="plan">
                                            <input type="checkbox" checked="" class="notification-toggle">
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>

                                    <!-- 景区通知设置 -->
                                    <div class="flex items-center justify-between py-1">
                                        <div class="flex items-center space-x-2">
                                            <i class="fa fa-bullhorn text-neutral-500"></i>
                                            <span class="text-sm">景区通知</span>
                                        </div>
                                        <label class="toggle-switch" data-category="notice">
                                            <input type="checkbox" checked="" class="notification-toggle">
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 免打扰设置 -->
                        <div>
                            <button class="w-full text-left px-3 py-2.5 rounded-md text-neutral-600 hover:bg-neutral-100 transition-colors flex items-center justify-between btn-effect setting-toggle" data-target="dnd-panel">
                                <span class="flex items-center space-x-3">
                                    <i class="fa fa-bell-slash-o w-5 text-center"></i>
                                    <span>免打扰设置</span>
                                </span>
                                <i class="fa fa-chevron-down text-xs text-neutral-400 transition-transform duration-300"></i>
                            </button>
                            <div class="setting-panel px-3 py-2" id="dnd-panel">
                                <div class="space-y-3 py-2">
                                    <!-- 免打扰总开关 -->
                                    <div class="flex items-center justify-between py-1">
                                        <div class="flex items-center space-x-2">
                                            <i class="fa fa-power-off text-neutral-500"></i>
                                            <span class="text-sm">开启免打扰模式</span>
                                        </div>
                                        <label class="toggle-switch">
                                            <input type="checkbox" id="dnd-master-switch">
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>

                                    <!-- 免打扰时间段 -->
                                    <div class="dnd-settings">
                                        <div class="text-sm text-neutral-500 mb-2">免打扰时间段</div>

                                        <div class="grid grid-cols-2 gap-3 mb-2">
                                            <div>
                                                <label class="text-xs text-neutral-500 block mb-1">开始时间</label>
                                                <select class="w-full border border-neutral-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                                    <option>22:00</option>
                                                    <option>21:00</option>
                                                    <option>23:00</option>
                                                    <option>00:00</option>
                                                </select>
                                            </div>
                                            <div>
                                                <label class="text-xs text-neutral-500 block mb-1">结束时间</label>
                                                <select class="w-full border border-neutral-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                                    <option>07:00</option>
                                                    <option>06:00</option>
                                                    <option>08:00</option>
                                                    <option>09:00</option>
                                                </select>
                                            </div>
                                        </div>

                                        <!-- 例外设置 -->
                                        <div class="text-sm text-neutral-500 mb-2">例外通知</div>

                                        <div class="space-y-2">
                                            <div class="flex items-center space-x-2">
                                                <input type="checkbox" id="dnd-exception-1" class="rounded text-primary focus:ring-primary">
                                                <label for="dnd-exception-1" class="text-sm">行程提醒（重要）</label>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <input type="checkbox" id="dnd-exception-2" class="rounded text-primary focus:ring-primary">
                                                <label for="dnd-exception-2" class="text-sm">景区紧急通知</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧通知列表 - 根据分类变化 -->
            <div class="lg:col-span-3" id="notificationList">
                <!-- 全部通知内容 -->
                <div class="notification-content" data-content="all">
                    <!-- 通知日期分组：今天 -->
                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">今天</h3>

                        <!-- 未读通知 - 景区通知 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-secondary" data-status="unread" data-category="notice">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                                        <i class="fa fa-bullhorn"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">凤凰古城景区通知</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">30分钟前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">因今日游客较多，凤凰古城北门入口将临时限流，请您提前规划入园路线，建议从东门或西门进入。</p>
                                    <div class="mt-3 flex items-center justify-between">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-detail" data-id="1">查看详情</button>
                                        <div class="w-2 h-2 bg-secondary rounded-full unread-dot"></div>
                                    </div>
                                    <!-- 通知详情 -->
                                    <div class="notification-detail" id="detail-1">
                                        <p class="text-neutral-600 text-sm">
                                            具体限流时间：今日10:00-16:00<br>
                                            推荐入园路线：<br>
                                            1. 东门入口：位于古城东侧，靠近沱江上游，人流量较少<br>
                                            2. 西门入口：位于古城西侧，靠近民俗文化广场，可优先体验苗族歌舞表演<br>
                                            限流期间景区内人流管控措施：每小时限流2000人，景区内设有5个分流引导点，工作人员将引导游客错峰游览。
                                        </p>
                                        <div class="mt-2 flex space-x-2">
                                            <a href="#" class="text-xs text-primary hover:underline">查看凤凰古城最新游览路线</a>
                                            <a href="#" class="text-xs text-primary hover:underline">联系景区客服</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 未读通知 - 评论回复 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-primary" data-status="unread" data-category="comment">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                        <i class="fa fa-comment-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">张家界背包客</span> 回复了你的评论
                                            <span class="text-primary hover:underline">《湘西凤凰古城住宿推荐》</span>
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">2小时前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">"你推荐的临江客栈确实不错，我上周住了两晚，夜景非常美！不过建议提前预订，旺季很难订到。"</p>
                                    <div class="mt-3 flex items-center justify-between">
                                        <div class="flex space-x-3">
                                            <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect reply-comment" data-id="2">回复</button>
                                            <button class="text-sm text-neutral-500 hover:text-neutral-700 transition-colors mark-as-read btn-effect" data-id="2">标为已读</button>
                                        </div>
                                        <div class="w-2 h-2 bg-primary rounded-full unread-dot"></div>
                                    </div>
                                    <!-- 通知详情 -->
                                    <div class="notification-detail" id="detail-2">
                                        <div class="flex items-start mb-2">
                                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-6 h-6 rounded-full mr-2 mt-0.5">
                                            <div>
                                                <p class="text-xs text-neutral-700 font-medium">张家界背包客</p>
                                                <p class="text-xs text-neutral-600">"我是上周六去的，临江的房间价格大概在300元左右，虽然比其他房间贵一点，但晚上坐在阳台看沱江夜景真的很值！特别是灯光亮起的时候，整个古城像童话一样。"</p>
                                                <p class="text-xs text-neutral-400 mt-1">2小时前</p>
                                            </div>
                                        </div>
                                        <div class="mt-2">
                                            <button class="text-xs text-primary hover:underline reply-comment" data-id="2">回复这条评论</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 通知日期分组：昨天 -->
                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">昨天</h3>

                        <!-- 未读通知 - 行程提醒 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-folk" data-status="unread" data-category="plan">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-folk/10 flex items-center justify-center text-folk">
                                        <i class="fa fa-calendar-check-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">行程提醒</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">昨天 16:45</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">你报名的 <span class="text-folk">湘西苗年文化体验之旅</span> 将于3天后开始，集合地点在吉首市民族文化广场，记得携带身份证件。</p>
                                    <div class="mt-3 flex items-center justify-between">
                                        <div class="flex space-x-3">
                                            <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-itinerary" data-id="4">查看行程</button>
                                            <button class="text-sm text-neutral-500 hover:text-neutral-700 transition-colors mark-as-read btn-effect" data-id="4">标为已读</button>
                                        </div>
                                        <div class="w-2 h-2 bg-folk rounded-full unread-dot"></div>
                                    </div>
                                    <!-- 通知详情 -->
                                    <div class="notification-detail" id="detail-4">
                                        <p class="text-xs text-neutral-700 font-medium mb-1">湘西苗年文化体验之旅 行程详情</p>
                                        <div class="space-y-2 text-xs text-neutral-600">
                                            <p><span class="text-neutral-500">活动时间：</span>8月18日 09:00 - 8月20日 17:00</p>
                                            <p><span class="text-neutral-500">集合信息：</span>8月18日 08:30 吉首市民族文化广场（近北门）</p>
                                            <p><span class="text-neutral-500">携带物品：</span>身份证、舒适运动鞋、防晒用品、换洗衣物</p>
                                            <p><span class="text-neutral-500">行程亮点：</span>苗年祭祀仪式、传统银饰制作体验、苗族长桌宴、篝火晚会</p>
                                        </div>
                                        <div class="mt-2 flex space-x-2">
                                            <a href="#" class="text-xs text-primary hover:underline">下载行程单</a>
                                            <a href="#" class="text-xs text-primary hover:underline">联系导游</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 未读通知 - 关注通知 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-primary" data-status="unread" data-category="follow">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                        <i class="fa fa-user-plus"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">苗寨向导阿坤</span> 关注了你
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">昨天 10:23</span>
                                    </div>
                                    <div class="mt-2 flex items-center space-x-3">
                                        <img src="https://picsum.photos/id/91/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
                                        <div>
                                            <p class="text-sm font-medium text-neutral-700">苗寨向导阿坤</p>
                                            <p class="text-xs text-neutral-400">湘西本地向导 · 专注苗寨深度游</p>
                                        </div>
                                    </div>
                                    <div class="mt-3 flex items-center justify-between">
                                        <div class="flex space-x-3">
                                            <button class="text-sm text-primary hover:text-primary/80 transition-colors px-3 py-1 border border-primary rounded-md hover:bg-primary/5 follow-back btn-effect" data-id="5">回关</button>
                                            <button class="text-sm text-neutral-500 hover:text-neutral-700 transition-colors mark-as-read btn-effect" data-id="5">标为已读</button>
                                        </div>
                                        <div class="w-2 h-2 bg-primary rounded-full unread-dot"></div>
                                    </div>
                                    <!-- 通知详情 -->
                                    <div class="notification-detail" id="detail-5">
                                        <div class="flex items-start mb-2">
                                            <img src="https://picsum.photos/id/91/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                                            <div>
                                                <p class="text-sm text-neutral-700 font-medium">苗寨向导阿坤</p>
                                                <p class="text-xs text-neutral-500">6年湘西本地向导经验 · 熟悉12个原生态苗寨</p>
                                                <p class="text-xs text-neutral-600 mt-1">"关注你很久了，你的湘西旅游攻略很专业，希望能互相交流，为游客提供更好的旅行建议。"</p>
                                            </div>
                                        </div>
                                        <div class="flex space-x-2 mt-2">
                                            <a href="#" class="text-xs text-primary hover:underline">查看TA的主页</a>
                                            <a href="#" class="text-xs text-primary hover:underline">查看TA的向导服务</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 已读通知 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="comment">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-comment-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">芙蓉镇游客</span> 评论了你的照片
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">昨天 09:15</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">"这张芙蓉镇瀑布的夜景拍得太美了！请问是用什么设备拍摄的？想知道具体拍摄位置。"</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect reply-comment" data-id="6">回复</button>
                                    </div>
                                    <!-- 通知详情 -->
                                    <div class="notification-detail" id="detail-6">
                                        <div class="flex items-start mb-2">
                                            <img src="https://picsum.photos/id/65/40/40" alt="用户头像" class="w-6 h-6 rounded-full mr-2 mt-0.5">
                                            <div>
                                                <p class="text-xs text-neutral-700 font-medium">芙蓉镇游客</p>
                                                <p class="text-xs text-neutral-600">"我下周要去芙蓉镇，想拍一组类似的照片，你的构图和光线处理都很专业，能分享一下拍摄参数和具体位置吗？"</p>
                                                <p class="text-xs text-neutral-400 mt-1">昨天 09:15</p>
                                            </div>
                                        </div>
                                        <div class="mt-2">
                                            <button class="text-xs text-primary hover:underline reply-comment" data-id="6">回复这条评论</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 通知日期分组：3天前 -->
                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">3天前</h3>

                        <!-- 已读通知 - 系统通知 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="notice">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-info-circle"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">系统通知</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">3天前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1">你的攻略 <span class="text-primary hover:underline">《张家界国家森林公园徒步指南》</span> 已被编辑推荐至首页，获得更多曝光机会。</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-guide" data-id="7">查看我的攻略</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 加载更多 -->
                    <div class="text-center py-4">
                        <button class="px-6 py-2 bg-white border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors flex items-center justify-center mx-auto btn-effect" id="loadMore">
                            <i class="fa fa-refresh mr-2"></i>
                            加载更多通知
                        </button>
                    </div>
                </div>

                <!-- 评论回复通知内容 -->
                <div class="notification-content hidden" data-content="comment">
                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">今天</h3>

                        <!-- 未读通知 - 评论回复 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-primary" data-status="unread" data-category="comment">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                        <i class="fa fa-comment-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">张家界背包客</span> 回复了你的评论
                                            <span class="text-primary hover:underline">《湘西凤凰古城住宿推荐》</span>
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">2小时前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">"你推荐的临江客栈确实不错，我上周住了两晚，夜景非常美！不过建议提前预订，旺季很难订到。"</p>
                                    <div class="mt-3 flex items-center justify-between">
                                        <div class="flex space-x-3">
                                            <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect reply-comment" data-id="comment-1">回复</button>
                                            <button class="text-sm text-neutral-500 hover:text-neutral-700 transition-colors mark-as-read btn-effect" data-id="comment-1">标为已读</button>
                                        </div>
                                        <div class="w-2 h-2 bg-primary rounded-full unread-dot"></div>
                                    </div>
                                    <!-- 通知详情 -->
                                    <div class="notification-detail" id="detail-comment-1">
                                        <div class="flex items-start mb-2">
                                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-6 h-6 rounded-full mr-2 mt-0.5">
                                            <div>
                                                <p class="text-xs text-neutral-700 font-medium">张家界背包客</p>
                                                <p class="text-xs text-neutral-600">"我是上周六去的，临江的房间价格大概在300元左右，虽然比其他房间贵一点，但晚上坐在阳台看沱江夜景真的很值！特别是灯光亮起的时候，整个古城像童话一样。"</p>
                                                <p class="text-xs text-neutral-400 mt-1">2小时前</p>
                                            </div>
                                        </div>
                                        <div class="mt-2">
                                            <button class="text-xs text-primary hover:underline reply-comment" data-id="comment-1">回复这条评论</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">昨天</h3>

                        <!-- 已读通知 - 评论 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="comment">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-comment-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">芙蓉镇游客</span> 评论了你的照片
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">昨天 09:15</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">"这张芙蓉镇瀑布的夜景拍得太美了！请问是用什么设备拍摄的？想知道具体拍摄位置。"</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect reply-comment" data-id="comment-2">回复</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">3天前</h3>

                        <!-- 已读通知 - 评论回复 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="comment">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-comment-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">德夯苗寨村民</span> 回复了你的问题
                                            <span class="text-primary hover:underline">《德夯苗寨有哪些特色美食？》</span>
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">3天前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">"我们苗寨的酸鱼和腊肉是必尝的，特别是用糯米腌制的酸鱼，已经有几百年历史了，来的时候可以到我家尝尝！"</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect reply-comment" data-id="comment-3">回复</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 加载更多 -->
                    <div class="text-center py-4">
                        <button class="px-6 py-2 bg-white border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors flex items-center justify-center mx-auto btn-effect">
                            <i class="fa fa-refresh mr-2"></i>
                            加载更多评论通知
                        </button>
                    </div>
                </div>

                <!-- 关注通知内容 -->
                <div class="notification-content hidden" data-content="follow">
                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">昨天</h3>

                        <!-- 未读通知 - 关注通知 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-primary" data-status="unread" data-category="follow">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                        <i class="fa fa-user-plus"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">苗寨向导阿坤</span> 关注了你
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">昨天 10:23</span>
                                    </div>
                                    <div class="mt-2 flex items-center space-x-3">
                                        <img src="https://picsum.photos/id/91/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
                                        <div>
                                            <p class="text-sm font-medium text-neutral-700">苗寨向导阿坤</p>
                                            <p class="text-xs text-neutral-400">湘西本地向导 · 专注苗寨深度游</p>
                                        </div>
                                    </div>
                                    <div class="mt-3 flex items-center justify-between">
                                        <div class="flex space-x-3">
                                            <button class="text-sm text-primary hover:text-primary/80 transition-colors px-3 py-1 border border-primary rounded-md hover:bg-primary/5 follow-back btn-effect" data-id="follow-1">回关</button>
                                            <button class="text-sm text-neutral-500 hover:text-neutral-700 transition-colors mark-as-read btn-effect" data-id="follow-1">标为已读</button>
                                        </div>
                                        <div class="w-2 h-2 bg-primary rounded-full unread-dot"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">1周前</h3>

                        <!-- 已读通知 - 关注通知 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="follow">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-user-plus"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700">
                                            <span class="font-medium">凤凰古城民宿联盟</span> 关注了你
                                        </p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">1周前</span>
                                    </div>
                                    <div class="mt-2 flex items-center space-x-3">
                                        <img src="https://picsum.photos/id/20/40/40" alt="机构头像" class="w-8 h-8 rounded-full">
                                        <div>
                                            <p class="text-sm font-medium text-neutral-700">凤凰古城民宿联盟</p>
                                            <p class="text-xs text-neutral-400">官方机构 · 凤凰古城200+民宿联合</p>
                                        </div>
                                    </div>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors px-3 py-1 border border-primary rounded-md hover:bg-primary/5 follow-back btn-effect" data-id="follow-2">回关</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 加载更多 -->
                    <div class="text-center py-4">
                        <button class="px-6 py-2 bg-white border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors flex items-center justify-center mx-auto btn-effect">
                            <i class="fa fa-refresh mr-2"></i>
                            加载更多关注通知
                        </button>
                    </div>
                </div>

                <!-- 行程提醒通知内容 -->
                <div class="notification-content hidden" data-content="plan">
                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">昨天</h3>

                        <!-- 未读通知 - 行程提醒 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-folk" data-status="unread" data-category="plan">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-folk/10 flex items-center justify-center text-folk">
                                        <i class="fa fa-calendar-check-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">行程提醒</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">昨天 16:45</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">你报名的 <span class="text-folk">湘西苗年文化体验之旅</span> 将于3天后开始，集合地点在吉首市民族文化广场，记得携带身份证件。</p>
                                    <div class="mt-3 flex items-center justify-between">
                                        <div class="flex space-x-3">
                                            <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-itinerary" data-id="plan-1">查看行程</button>
                                            <button class="text-sm text-neutral-500 hover:text-neutral-700 transition-colors mark-as-read btn-effect" data-id="plan-1">标为已读</button>
                                        </div>
                                        <div class="w-2 h-2 bg-folk rounded-full unread-dot"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">1周前</h3>

                        <!-- 已读通知 - 行程变更提醒 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="plan">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-calendar-plus-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">行程变更通知</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">1周前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1">你参加的 <span class="text-primary hover:underline">《张家界国家森林公园一日游》</span> 行程因天气原因，出发时间调整为上午9:00（原计划8:00）</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-itinerary" data-id="plan-2">查看调整后行程</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">2周前</h3>

                        <!-- 已读通知 - 行程确认 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="plan">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-calendar-check-o"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">行程确认通知</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">2周前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1">你预订的 <span class="text-primary hover:underline">《芙蓉镇+红石林一日游》</span> 已确认，导游将在出发前一天与你联系。</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-itinerary" data-id="plan-3">查看订单详情</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 加载更多 -->
                    <div class="text-center py-4">
                        <button class="px-6 py-2 bg-white border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors flex items-center justify-center mx-auto btn-effect">
                            <i class="fa fa-refresh mr-2"></i>
                            加载更多行程提醒
                        </button>
                    </div>
                </div>

                <!-- 景区通知内容 -->
                <div class="notification-content hidden" data-content="notice">
                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">今天</h3>

                        <!-- 未读通知 - 景区通知 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-secondary" data-status="unread" data-category="notice">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                                        <i class="fa fa-bullhorn"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">凤凰古城景区通知</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">30分钟前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1 line-clamp-2">因今日游客较多，凤凰古城北门入口将临时限流，请您提前规划入园路线，建议从东门或西门进入。</p>
                                    <div class="mt-3 flex items-center justify-between">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-detail" data-id="notice-1">查看详情</button>
                                        <div class="w-2 h-2 bg-secondary rounded-full unread-dot"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">3天前</h3>

                        <!-- 已读通知 - 景区活动 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="notice">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">德夯苗寨活动通知</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">3天前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1">8月15日至8月20日，德夯苗寨将举办"苗族银饰文化节"，期间将有非遗传承人现场展示银饰制作技艺，欢迎游客参与。</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-detail" data-id="notice-2">查看活动详情</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 notification-group">
                        <h3 class="text-sm font-medium text-neutral-400 mb-4 px-2">1周前</h3>

                        <!-- 已读通知 - 景区维护 -->
                        <div class="bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200" data-status="read" data-category="notice">
                            <div class="flex">
                                <div class="flex-shrink-0 mr-4">
                                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                        <i class="fa fa-wrench"></i>
                                    </div>
                                </div>
                                <div class="flex-grow min-w-0">
                                    <div class="flex justify-between">
                                        <p class="text-neutral-700 font-medium">张家界天门山维护通知</p>
                                        <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">1周前</span>
                                    </div>
                                    <p class="text-neutral-500 text-sm mt-1">因设备维护，张家界天门山玻璃栈道将于8月25日至8月27日临时关闭，期间其他景点正常开放，给您带来不便，敬请谅解。</p>
                                    <div class="mt-3 flex items-center">
                                        <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-detail" data-id="notice-3">查看调整后游览路线</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 加载更多 -->
                    <div class="text-center py-4">
                        <button class="px-6 py-2 bg-white border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors flex items-center justify-center mx-auto btn-effect">
                            <i class="fa fa-refresh mr-2"></i>
                            加载更多景区通知
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-700 text-white py-6 mt-12">
        <div class="container mx-auto px-4">
            <div class="border-t border-neutral-600 mt-4 pt-4 text-center text-sm text-neutral-400">
                <p>© 2023 湘西旅游攻略网 版权所有 | 湘ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 模态框：回复评论 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center" id="replyModal">
        <div class="bg-white rounded-lg w-full max-w-md p-6 mx-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-neutral-700">回复评论</h3>
                <button class="text-neutral-400 hover:text-neutral-600 transition-colors btn-effect" id="closeReplyModal">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="mb-4">
                <textarea class="w-full border border-neutral-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" rows="4" placeholder="输入你的回复..."></textarea>
            </div>
            <div class="flex justify-end space-x-3">
                <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors btn-effect" id="cancelReply">取消</button>
                <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors btn-effect" id="submitReply">发送回复</button>
            </div>
        </div>
    </div>

    <!-- 模态框：提示消息 -->
    <div id="toast" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-neutral-700 text-white px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300 opacity-0 translate-y-4">
        操作成功
    </div>

    <!-- JavaScript -->
    <script>
        // 用户菜单切换
        const userMenuButton = document.getElementById('userMenuButton');
        const userMenu = document.getElementById('userMenu');

        if (userMenuButton && userMenu) {
            userMenuButton.addEventListener('click', () => {
                userMenu.classList.toggle('hidden');
            });

            // 点击其他地方关闭用户菜单
            document.addEventListener('click', (e) => {
                if (!userMenuButton.contains(e.target) && !userMenu.contains(e.target)) {
                    userMenu.classList.add('hidden');
                }
            });
        }

        // 移动端菜单切换
        const mobileMenuButton = document.getElementById('mobileMenuButton');
        const mobileMenu = document.getElementById('mobileMenu');

        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        const scrollIndicator = document.getElementById('scrollIndicator');

        window.addEventListener('scroll', () => {
            // 导航栏效果
            if (navbar && window.scrollY > 10) {
                navbar.classList.add('shadow');
                navbar.classList.remove('shadow-sm');
            } else if (navbar) {
                navbar.classList.remove('shadow');
                navbar.classList.add('shadow-sm');
            }

            // 滚动进度指示器
            if (scrollIndicator) {
                const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
                const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
                const scrolled = (winScroll / height) * 100;
                scrollIndicator.style.width = scrolled + "%";
            }
        });

        // 通知分类切换功能 - 只改变右侧通知内容，左侧分类保持完整显示
        const categoryLinks = document.querySelectorAll('.notification-category');
        const contentSections = document.querySelectorAll('.notification-content');

        categoryLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                // 检查分类是否已被禁用
                if (this.closest('li').classList.contains('opacity-50')) {
                    return; // 如果分类已被禁用，则不执行切换
                }

                // 更新分类激活状态
                categoryLinks.forEach(l => {
                    l.classList.remove('bg-primary/10', 'text-primary', 'font-medium');
                    l.classList.add('text-neutral-600', 'hover:bg-neutral-100');
                });
                this.classList.add('bg-primary/10', 'text-primary', 'font-medium');
                this.classList.remove('text-neutral-600', 'hover:bg-neutral-100');

                const category = this.getAttribute('data-category');

                // 显示对应分类的内容，隐藏其他内容
                contentSections.forEach(section => {
                    if (section.getAttribute('data-content') === category) {
                        section.classList.remove('hidden');
                    } else {
                        section.classList.add('hidden');
                    }
                });
            });
        });

        // 通知设置面板展开/收起功能
        const settingToggles = document.querySelectorAll('.setting-toggle');

        settingToggles.forEach(toggle => {
            toggle.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const targetPanel = document.getElementById(targetId);
                const icon = this.querySelector('.fa-chevron-down');

                if (targetPanel) {
                    targetPanel.classList.toggle('active');
                    icon.classList.toggle('rotate-180');
                }
            });
        });

        // 免打扰总开关控制子选项
        const dndMasterSwitch = document.getElementById('dnd-master-switch');
        const dndSettings = document.querySelector('.dnd-settings');

        if (dndMasterSwitch && dndSettings) {
            // 初始状态
            dndSettings.style.opacity = dndMasterSwitch.checked ? '1' : '0.5';
            dndSettings.style.pointerEvents = dndMasterSwitch.checked ? 'auto' : 'none';

            dndMasterSwitch.addEventListener('change', function() {
                dndSettings.style.opacity = this.checked ? '1' : '0.5';
                dndSettings.style.pointerEvents = this.checked ? 'auto' : 'none';
            });
        }

        // 通知详情展开/收起功能
        const detailButtons = document.querySelectorAll('.view-detail, .view-itinerary, .view-guide');

        detailButtons.forEach(button => {
            button.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                const detailElement = document.getElementById(`detail-${id}`);

                if (detailElement) {
                    detailElement.classList.toggle('active');

                    // 切换按钮文本
                    if (detailElement.classList.contains('active')) {
                        this.textContent = '收起详情';
                    } else {
                        if (this.classList.contains('view-detail')) {
                            this.textContent = '查看详情';
                        } else if (this.classList.contains('view-itinerary')) {
                            this.textContent = '查看行程';
                        } else if (this.classList.contains('view-guide')) {
                            this.textContent = '查看我的攻略';
                        }
                    }
                }
            });
        });

        // 通知标为已读功能
        const markAsReadButtons = document.querySelectorAll('.mark-as-read');
        let currentNotificationId = null;

        markAsReadButtons.forEach(button => {
            button.addEventListener('click', function() {
                const notificationId = this.getAttribute('data-id');
                markNotificationAsRead(notificationId, this.closest('.bg-white'));
            });
        });

        // 标记单个通知为已读
        function markNotificationAsRead(notificationId, notificationElement) {
            // 模拟API请求
            console.log(`标记通知 ${notificationId} 为已读`);

            // 更新UI
            notificationElement.classList.remove('border-primary', 'border-secondary', 'border-accent', 'border-folk');
            notificationElement.classList.add('border-neutral-200');
            notificationElement.setAttribute('data-status', 'read');

            const iconContainer = notificationElement.querySelector('.flex-shrink-0 div');
            iconContainer.classList.remove('bg-primary/10', 'bg-secondary/10', 'bg-accent/10', 'bg-folk/10', 'text-primary', 'text-secondary', 'text-accent', 'text-folk');
            iconContainer.classList.add('bg-neutral-100', 'text-neutral-500');

            const unreadDot = notificationElement.querySelector('.unread-dot');
            if (unreadDot) unreadDot.remove();

            // 移除标为已读按钮
            const markButton = notificationElement.querySelector('.mark-as-read');
            if (markButton) markButton.remove();

            // 更新未读数量
            updateUnreadCount(-1);

            // 显示操作成功提示
            showToast('已标记为已读');
        }

        // 更新未读数量的函数
        function updateUnreadCount(change) {
            const badges = document.querySelectorAll('.bg-primary.text-white.text-xs.px-2.py-0\\.5.rounded-full');
            const mainBadge = document.querySelector('.badge-pulse');

            if (mainBadge) {
                // 提取数字并转换为整数
                let countText = mainBadge.textContent.trim().replace(/[^\d]/g, '');
                let count = parseInt(countText, 10) || 0;

                count += change;
                if (count < 0) count = 0;
                mainBadge.textContent = `${count} 条未读`;

                // 更新分类中的未读数量
                badges.forEach(badge => {
                    if (!badge.classList.contains('badge-pulse')) {
                        let badgeCount = parseInt(badge.textContent, 10) || 0;
                        badgeCount += change;
                        if (badgeCount < 0) badgeCount = 0;
                        badge.textContent = badgeCount.toString();

                        if (badgeCount === 0) {
                            badge.classList.add('hidden');
                        } else {
                            badge.classList.remove('hidden');
                        }
                    }
                });
            }
        }

        // 全部标为已读按钮
        const markAllAsReadButton = document.getElementById('markAllAsRead');

        if (markAllAsReadButton) {
            markAllAsReadButton.addEventListener('click', function() {
                // 模拟API请求
                console.log('全部标记为已读');

                const unreadNotifications = document.querySelectorAll('[data-status="unread"]');
                const unreadCount = unreadNotifications.length;

                if (unreadCount === 0) {
                    showToast('没有未读通知');
                    return;
                }

                unreadNotifications.forEach(notification => {
                    notification.classList.remove('border-primary', 'border-secondary', 'border-accent', 'border-folk');
                    notification.classList.add('border-neutral-200');
                    notification.setAttribute('data-status', 'read');

                    const iconContainer = notification.querySelector('.flex-shrink-0 div');
                    iconContainer.classList.remove('bg-primary/10', 'bg-secondary/10', 'bg-accent/10', 'bg-folk/10', 'text-primary', 'text-secondary', 'text-accent', 'text-folk');
                    iconContainer.classList.add('bg-neutral-100', 'text-neutral-500');

                    const unreadDot = notification.querySelector('.unread-dot');
                    if (unreadDot) unreadDot.remove();

                    // 移除标为已读按钮
                    const markButton = notification.querySelector('.mark-as-read');
                    if (markButton) markButton.remove();
                });

                // 重置未读数量
                updateUnreadCount(-unreadCount);

                // 显示操作成功提示
                showToast('全部通知已标记为已读');
            });
        }

        // 清空已读按钮功能
        const clearReadButton = document.getElementById('clearRead');

        if (clearReadButton) {
            clearReadButton.addEventListener('click', function() {
                // 确认对话框
                if (!confirm('确定要清空所有已读通知吗？此操作不可恢复。')) {
                    return;
                }

                // 模拟API请求
                console.log('清空已读通知');

                const readNotifications = document.querySelectorAll('[data-status="read"]');
                const readCount = readNotifications.length;

                if (readCount === 0) {
                    showToast('没有已读通知可清空');
                    return;
                }

                // 移除所有已读通知
                readNotifications.forEach(notification => {
                    // 添加淡出动画
                    notification.style.transition = 'all 0.3s ease';
                    notification.style.opacity = '0';
                    notification.style.height = notification.offsetHeight + 'px';

                    // 动画结束后移除元素
                    setTimeout(() => {
                        notification.style.height = '0';
                        notification.style.margin = '0';
                        notification.style.padding = '0';
                        notification.style.overflow = 'hidden';

                        setTimeout(() => {
                            notification.remove();
                        }, 300);
                    }, 300);
                });

                // 显示操作成功提示
                showToast(`已清空 ${readCount} 条已读通知`);
            });
        }

        // 加载更多功能
        const loadMoreButton = document.getElementById('loadMore');

        if (loadMoreButton) {
            loadMoreButton.addEventListener('click', function() {
                // 显示加载状态
                this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
                this.disabled = true;

                // 模拟API请求延迟
                setTimeout(() => {
                    // 恢复按钮状态
                    this.innerHTML = '<i class="fa fa-refresh mr-2"></i> 加载更多通知';
                    this.disabled = false;

                    // 检查是否还有更多通知
                    const hasMore = Math.random() > 0.5; // 随机模拟是否有更多

                    if (!hasMore) {
                        showToast('已经加载全部通知');
                        return;
                    }

                    // 创建新通知并添加到列表
                    const activeContent = document.querySelector('.notification-content:not(.hidden)');
                    const lastGroup = activeContent.querySelector('.mb-6:last-of-type');

                    // 克隆一个已有通知作为新通知
                    const newNotification = document.createElement('div');
                    newNotification.className = 'bg-white rounded-lg shadow-notification p-4 mb-3 notification-transition hover:shadow-notification-hover hover:translate-y-[-2px] border-l-4 border-neutral-200';
                    newNotification.setAttribute('data-status', 'read');
                    newNotification.setAttribute('data-category', 'notice');

                    newNotification.innerHTML = `
                        <div class="flex">
                            <div class="flex-shrink-0 mr-4">
                                <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500">
                                    <i class="fa fa-info-circle"></i>
                                </div>
                            </div>
                            <div class="flex-grow min-w-0">
                                <div class="flex justify-between">
                                    <p class="text-neutral-700 font-medium">系统通知<p class="text-neutral-700 font-medium">系统通知</p>
                                    <span class="text-xs text-neutral-400 whitespace-nowrap ml-2">5天前</span>
                                </div>
                                <p class="text-neutral-500 text-sm mt-1">湘西土家族苗族自治州将举办年度文化旅游节，活动期间部分景区将有特别表演。</p>
                                <div class="mt-3 flex items-center">
                                    <button class="text-sm text-primary hover:text-primary/80 transition-colors btn-effect view-detail" data-id="new">查看详情</button>
                                </div>
                                <!-- 通知详情 -->
                                <div class="notification-detail" id="detail-new">
                                    <p class="text-xs text-neutral-700 font-medium mb-1">湘西土家族苗族自治州年度文化旅游节详情</p>
                                    <div class="space-y-1 text-xs text-neutral-600">
                                        <p><span class="text-neutral-500">活动时间：</span>9月15日 - 10月15日</p>
                                        <p><span class="text-neutral-500">活动地点：</span>吉首市、凤凰县、永顺县等多地</p>
                                        <p><span class="text-neutral-500">特色活动：</span>土家族茅古斯舞表演、苗族银饰制作大赛、湘西美食节</p>
                                    </div>
                                    <a href="#" class="text-xs text-primary hover:underline mt-2 inline-block">查看活动完整日程</a>
                                </div>
                            </div>
                        </div>
                    `;

                    // 添加到列表中
                    lastGroup.appendChild(newNotification);

                    // 为新添加的通知绑定事件
                    const newDetailButton = newNotification.querySelector('.view-detail');
                    newDetailButton.addEventListener('click', function() {
                        const id = this.getAttribute('data-id');
                        const detailElement = document.getElementById(`detail-${id}`);

                        if (detailElement) {
                            detailElement.classList.toggle('active');
                            this.textContent = detailElement.classList.contains('active') ? '收起详情' : '查看详情';
                        }
                    });

                    // 显示加载成功提示
                    showToast('已加载更多通知');
                }, 1500);
            });
        }

        // 回复评论功能
        const replyButtons = document.querySelectorAll('.reply-comment');
        const replyModal = document.getElementById('replyModal');
        const closeReplyModal = document.getElementById('closeReplyModal');
        const cancelReply = document.getElementById('cancelReply');
        const submitReply = document.getElementById('submitReply');

        replyButtons.forEach(button => {
            button.addEventListener('click', function() {
                currentNotificationId = this.getAttribute('data-id');
                replyModal.classList.remove('hidden');
                replyModal.classList.add('flex');
                // 聚焦到文本框
                replyModal.querySelector('textarea').focus();
            });
        });

        // 关闭回复模态框
        function closeModal() {
            if (replyModal) {
                replyModal.classList.add('hidden');
                replyModal.classList.remove('flex');
                // 清空文本框
                const textarea = replyModal.querySelector('textarea');
                if (textarea) textarea.value = '';
                currentNotificationId = null;
            }
        }

        if (closeReplyModal) closeReplyModal.addEventListener('click', closeModal);
        if (cancelReply) cancelReply.addEventListener('click', closeModal);

        // 提交回复
        if (submitReply) {
            submitReply.addEventListener('click', function() {
                if (replyModal) {
                    const replyContent = replyModal.querySelector('textarea').value.trim();

                    if (!replyContent) {
                        showToast('请输入回复内容');
                        return;
                    }

                    // 模拟API请求
                    console.log(`回复通知 ${currentNotificationId}: ${replyContent}`);

                    // 关闭模态框
                    closeModal();

                    // 显示成功提示
                    showToast('回复发送成功');
                }
            });
        }

        // 点击模态框外部关闭
        if (replyModal) {
            replyModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal();
                }
            });
        }

        // 回关功能
        const followButtons = document.querySelectorAll('.follow-back');

        followButtons.forEach(button => {
            button.addEventListener('click', function() {
                const userId = this.getAttribute('data-id');

                // 模拟API请求
                console.log(`关注用户 ${userId}`);

                // 更新按钮状态
                this.innerHTML = '已关注';
                this.classList.remove('text-primary', 'border-primary', 'hover:bg-primary/5');
                this.classList.add('text-neutral-500', 'border-neutral-300', 'hover:bg-neutral-50');
                this.disabled = true;

                // 显示成功提示
                showToast('已成功关注');

                // 同时将此通知标为已读
                const notification = this.closest('.bg-white');
                if (notification.getAttribute('data-status') === 'unread') {
                    markNotificationAsRead(userId, notification);
                }
            });
        });

        // 提示消息功能
        function showToast(message) {
            const toast = document.getElementById('toast');
            if (toast) {
                toast.textContent = message;

                // 显示toast
                toast.classList.remove('opacity-0', 'translate-y-4');
                toast.classList.add('opacity-100', 'translate-y-0');

                // 3秒后隐藏
                setTimeout(() => {
                    toast.classList.remove('opacity-100', 'translate-y-0');
                    toast.classList.add('opacity-0', 'translate-y-4');
                }, 3000);
            }
        }

        // 通知设置开关与分类导航的联动功能
        const notificationToggles = document.querySelectorAll('.notification-toggle');

        // 为每个通知开关添加事件监听
        notificationToggles.forEach(toggle => {
            toggle.addEventListener('change', function() {
                const category = this.closest('.toggle-switch').getAttribute('data-category');
                const categoryItem = document.querySelector(`li[data-category-item="${category}"]`);
                const categoryLink = document.querySelector(`.notification-category[data-category="${category}"]`);

                if (categoryItem && categoryLink) {
                    // 如果开关关闭，隐藏对应的分类并禁用
                    if (!this.checked) {
                        categoryItem.classList.add('opacity-50', 'pointer-events-none');
                        categoryLink.classList.remove('bg-primary/10', 'text-primary', 'font-medium');
                        categoryLink.classList.add('text-neutral-400');

                        // 如果当前正显示该分类的内容，则切换到"全部通知"
                        const activeContent = document.querySelector('.notification-content:not(.hidden)');
                        if (activeContent && activeContent.getAttribute('data-content') === category) {
                            document.querySelector('.notification-category[data-category="all"]').click();
                        }

                        showToast(`已关闭${getCategoryName(category)}通知`);
                    } else {
                        // 如果开关打开，恢复显示对应的分类
                        categoryItem.classList.remove('opacity-50', 'pointer-events-none');
                        categoryLink.classList.remove('text-neutral-400');
                        categoryLink.classList.add('text-neutral-600', 'hover:bg-neutral-100');

                        showToast(`已开启${getCategoryName(category)}通知`);
                    }
                }
            });
        });

        // 获取分类名称的辅助函数
        function getCategoryName(category) {
            const categoryMap = {
                'comment': '评论回复',
                'follow': '关注',
                'plan': '行程提醒',
                'notice': '景区'
            };
            return categoryMap[category] || category;
        }

        // 页面加载时初始化分类状态
        document.addEventListener('DOMContentLoaded', function() {
            notificationToggles.forEach(toggle => {
                const category = toggle.closest('.toggle-switch').getAttribute('data-category');
                const categoryItem = document.querySelector(`li[data-category-item="${category}"]`);
                const categoryLink = document.querySelector(`.notification-category[data-category="${category}"]`);

                if (categoryItem && categoryLink && !toggle.checked) {
                    categoryItem.classList.add('opacity-50', 'pointer-events-none');
                    categoryLink.classList.remove('bg-primary/10', 'text-primary', 'font-medium');
                    categoryLink.classList.add('text-neutral-400');
                }
            });
        });
    </script>


</body></html>
